<template>
    <Row type="flex" justify="space-between">
        <div span="8" class="pay-combo pay-combo-avtive">
            <div class="pay-combo-center">
                <div class="pay-combo-center-left">
                    <div class="pay-combo-h1">套餐一</div>
                    <div class="money">¥888.00元</div>
                    <div>
                        <div class="one">1人授权</div>
                    </div>
                </div>
                <div class="desc">
                    <span>购买次套餐后</span>
                    <span>后续每增加一个账号</span>
                    <span>需支付888元</span>
                </div>
            </div>
            <div class="pay-combo-bottom">
                <div class="two">PERSONAl</div>
            </div>
        </div>
        <div span="8" class="pay-combo">
            <div><h1>套餐二</h1></div>
            <div class="font-size">6人套餐/2980元</div>
            <div class="font-size-18">购买次账号后，后续每增加一个账号需要支付300元</div>
        </div>
    </Row>
</template>

<script>
export default {
  name: 'combo01'
}
</script>

<style scoped lang="less">
    .pay-combo {
        color: #425978;
        padding: 10px;
        height: 150px;
        width: 400px;
        border-radius: 4px;

        &-h1 {
            font-size: 20px;
            font-weight: bold;
            color: #8bacd5;
        }

        &-avtive {
            border: 1px solid #019fe6;
        }

        &-center {
            display: flex;

            &-left {
                width: 200px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                text-align: center;
            }
        }

        &-bottom {
            display: flex;

            .two {
                color: #eeeeee;
                top: -28px;
                position: absolute;
                font-size: 46px;
                left: 145px;
            }
        }

        .money {
            font-size: 30px;
            font-weight: bold;
            width: 220px;
        }

        .one {
            color: white;
            text-align: center;
            font-weight: bold;
            width: 60px;
            background-color: #8aabd8;
            border-radius: 5px;
        }

        .desc {
            font-size: 18px;
            font-weight: bold;
            width: 120px;
        }
    }

    .font-size {
        font-size: 20px;

        &-18 {
            font-size: 18px;
        }
    }

    .select-combo {
        padding: 20px;

        &-top-p5 {
            padding-top: 5px;
        }
    }

    #qrCode {
        display: flex;
        justify-content: center;
    }
</style>
